<template>
    <el-form ref="form" :rules='rules' :model="subForm" label-width="80px">
        <el-form-item>
            <div>
                <span>仓库名：</span>
                <el-select v-model="subForm.warehouseName" clearable @blur.native.capture="getGoodsType"
                           placeholder="请选择">
                    <el-option
                            v-for="item in subForm.select1"
                            :key="item.warehouseId"
                            :label="item.warehouseName"
                            :value="item.warehouseId">
                    </el-option>
                </el-select>
                <span>商品分类：</span>
                <el-select v-model="subForm.goodsType" clearable placeholder="请选择">
                    <el-option
                            v-for="item in subForm.select2"
                            :key="item.goodsType"
                            :label="item.goodsType"
                            :value="item.goodsType">
                    </el-option>
                </el-select>
                <el-button style="margin-left: 10px" type="primary" @click="verification" icon="el-icon-search">查询</el-button>
            </div>
        </el-form-item>
        <el-form-item>
            <span style="color: #cf9236">库存的存量(单位:件)</span>
        </el-form-item>
        <el-form-item>
            <div id="report" style="width: 810px;height: 360px;">
                <!--        <el-sl-panel v-model="source"></el-sl-panel>-->
            </div>
        </el-form-item>
    </el-form>

</template>

<script>
    import echarts from "echarts";

    export default {
        name: 'Check',
        data() {
            return {
                subForm: {
                    goodsType: '',
                    warehouseName: '',
                    select1: [],
                    select2: [],
                },
                source: [],
                charts: "",

                rules: {
                    goodsType: [
                        {
                            // required: true,
                            // message: '商品的类型必须选',
                            // trigger: ['blur', 'change']
                        }
                    ],
                    warehouseName: [
                        // {required: true,
                        //   message: '商品的名称',
                        //   trigger: ['blur', 'change']}
                    ]
                }
            }

        },

        methods: {
            //查询监听
            verification() {
                // if (this.subForm.warehouseName == null || this.subForm.warehouseName === '') {
                //   this.$message.error(new Error('仓库必须选'))
                //   return false
                // }
                // if (this.subForm.goodsType == null || this.subForm.goodsType === '') {
                //   this.$message.error(new Error('商品分类必须选'))
                //   return false
                // }
                this.$axios.post('GoodsInf', {
                    warehouseId: this.subForm.warehouseName,
                    goodsType: this.subForm.goodsType
                }).then(resp => {
                    if (resp) {
                        this.source = resp.data.goodsInf
                        console.log(this.source)
                        this.draw("report")
                    }
                })
                // getAllGoods(this)
            },
            //获得商品的种类
            getGoodsType() {
                // alert(this.subForm.supplierName)
                this.$axios.post('outGtGoodsType', {
                    warehouseId: this.subForm.warehouseName
                }).then(resp => {
                    if (resp) {
                        this.subForm.select2 = resp.data.goodsTypeList
                    }
                })
            },
            // //获取商品名称和数量
            // getGoodsInf(){
            //   this.$axios.post('GoodsInf', {
            //     warehouseId:this.subForm.warehouseName,
            //     goodsType:this.subForm.goodsType
            //   }).then(resp => {
            //     if (resp) {
            //       this.source = resp.data.goodsInf
            //     }
            //   })
            // },

            draw(id) {
                this.charts = echarts.init(document.getElementById(id));
                this.charts.setOption({
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: this.source    //连接数据
                    },
                    xAxis: {type: "category"},
                    yAxis: {
                        // data:
                    },
                    grid: {bottom: 30},
                    series: [
                        {
                            type: "bar",    //表示这个是柱状图
                            barCategoryGap: "40%",
                            itemStyle: {color: "#F56C6C"},   //定义颜色
                            label: {
                                show: true,
                                position: 'top'
                            },
                        },
                    ]
                });
            }
        },
        mounted() {
            getWarehouseName(this)
            getAllGoods(this)
            this.$nextTick(function () {
                this.draw("report");
            })
            // getWarehouseName(this)
            // getAllGoods(this)
        }

    }

    function getWarehouseName($this) {
        $this.$axios.post("OutGetWarehouseName", {}).then(resp => {
            if (resp) {
                $this.subForm.select1 = resp.data.warehouseNameList
            }
        })
    }

    function getAllGoods($this) {
        $this.$axios.post('getAllGoods', {
            warehouseId: $this.subForm.warehouseName,
            goodsType: $this.subForm.goodsType
        }).then(resp => {
            if (resp) {
                $this.source = resp.data.goodsInf
                console.log($this.source)
                $this.draw("report")
            }
        })
    }

</script>

<style scoped>

</style>
